<template>
  <div class="otherBooks-container">
    <div class="other-title">相关图书</div>
    <div class="other-books">
      <a
        class="other-item"
        href=""
        v-for="(item, index) in relatedBooks"
        :key="index"
      >
        <div class="left-box">
          <img
            src="https://file.ituring.com.cn/LargeCover/010093cb009947eb0f4b"
          />
        </div>
        <div class="right-box">
          <h2 class="name">{{ item.name }}</h2>
          <div class="author">{{ item.authorNameString }}</div>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RelatedBooks',
  props: {
    relatedBooks: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
.other-title {
  color: #152844;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  height: 26px;
  margin-bottom: 16px;
}
/* 相关图书项 */
.other-books .other-item {
  display: flex;
  margin-bottom: 20px;
}
/* 相关图书项左盒子 */
.other-item .left-box {
  flex: 0 0 178px;
  background: #eaf1f5;
}
.other-item .left-box img {
  width: 80px;
  display: block;
  margin: 6px auto;
  border-radius: 4px;
  box-shadow: 0 0 16px rgb(0 0 0 / 12%);
}
/* 相关图书项右盒子 */
.other-item .right-box {
  border-color: #dae1e7;
  flex: 1;
  background: #f6f9fb;
  justify-content: flex-start;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 16px;
}
.right-box .name {
  color: #152844;
  font-weight: 600;
  font-size: 18px;
  line-height: 26px;
  margin-top: 20px;
}
.right-box .author {
  color: #6f6f6f;
  margin-top: 12px;
  font-size: 12px;
  line-height: 16px;
  height: 16px;
}
</style>
